<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()
const userInfo = ref({
  name: '用户',
  avatar: '',
  email: 'user@example.com',
  joinDate: '2025-01-01'
})

const logout = () => {
  router.push('/login')
}
</script>

<template>
  <div class="profile-container">
    <div class="profile-header">
      <el-avatar :size="80" :src="userInfo.avatar" />
      <h2>{{ userInfo.name }}</h2>
      <p>{{ userInfo.email }}</p>
    </div>

    <div class="profile-content">
      <el-card>
        <template #header>
          <div class="card-header">
            <span>个人信息</span>
          </div>
        </template>
        
        <el-form label-width="100px">
          <el-form-item label="用户名">
            <el-input v-model="userInfo.name" />
          </el-form-item>
          <el-form-item label="邮箱">
            <el-input v-model="userInfo.email" disabled />
          </el-form-item>
          <el-form-item label="注册日期">
            <el-input v-model="userInfo.joinDate" disabled />
          </el-form-item>
        </el-form>
      </el-card>

      <el-card class="mt-4">
        <template #header>
          <div class="card-header">
            <span>账户设置</span>
          </div>
        </template>
        
        <div class="settings-actions">
          <el-button type="primary">修改密码</el-button>
          <el-button @click="logout">退出登录</el-button>
        </div>
      </el-card>
    </div>
  </div>
</template>

<style scoped>
.profile-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.profile-header {
  text-align: center;
  margin-bottom: 30px;
}

.profile-header h2 {
  margin: 10px 0 5px;
  font-size: 24px;
}

.profile-header p {
  color: var(--text-color-secondary);
  margin: 0;
}

.card-header {
  font-weight: bold;
  font-size: 18px;
}

.settings-actions {
  display: flex;
  gap: 15px;
}

.mt-4 {
  margin-top: 20px;
}
</style>
